import React, { Component , Fragment } from 'react'   // Fragment可以当空标签,渲染时不会显示

import { 
    TodoHeader,
    TodoList,
    TodoInput,
    Like
} from './components'

import { getList } from './services'

export default class App extends Component {
    // 组件内部数据 
    // state = {
    //     title: '待办事项列表'
    // }
    // constructor是构造函数（方法）
    constructor() {
        super()
        this.state = {
            title: '待办事项列表',
            desc: '今日事今日毕',
            article: '<div>defsdfsdfs   <span>sdf</span></div>',
            todos: [                  // react中列表渲染用map循环
                // {
                //     id: 1,
                //     title: '吃饭',
                //     isCompleted: true
                // },
                // {
                //     id: 2,
                //     title: '睡觉',
                //     isCompleted: false
                // },
            ]
        }
    }
    addTodo = (todoTitle) => {
        // 这样写不对，push语句返回数组长度
        // this.setState({
        //     todos: this.state.todos.push({
        //         id: Math.random(),
        //         title: todoTitle,
        //         isCompleted: false
        //     })
        // })
        // 这是对的
        // this.setState({
        //     todos: this.state.todos.concat({
        //         id: Math.random(),
        //         title: todoTitle,
        //         isCompleted: false
        //     })
        // })
        // 先复制一份，再push
        // const newTodos = this.state.todos.slice()    // 数组拷贝
        const newTodos = [...this.state.todos]        // 数组拷贝
        newTodos.push({
            id: Math.random(),
            title: todoTitle,
            isCompleted: false
        })
        this.setState({
            todos: newTodos
        })
    }
    onCompletedChange = (id) => {
        this.setState((prevState) => {
            return {
                todos: prevState.todos.map(todo => {
                    if(todo.id === id) {
                        todo.isCompleted = !todo.isCompleted
                    }
                    return todo
                })
            }
        })
    }

    getData = () => {
        getList().then(data => {
            // console.log(data.data.result)
            let todosList = data.data.result
            this.setState({
                todos: todosList.map(list => {
                    if(list.isCompleted === 0) {
                        list.isCompleted = true
                    }else {
                        list.isCompleted = false
                    }
                    return list
                })
            })
        })
    }

    // 生命周期 挂载，获取后台数据
    componentDidMount() {
        // this.getData()
    }

    render() {
        return (
            <Fragment>
                {
                    // <div dangerouslySetInnerHTML={{__html:this.state.article}} />
                }
                {/* <TodoHeader title="待办事项" desc="今日事今日毕" a="1" b="2" x={1} y={2}>
                    待办事项
                    <i>列表</i>
                </TodoHeader> */}
                <TodoHeader desc={this.state.desc} a="1" b="2" x={1} y={2}>
                    {this.state.title}
                </TodoHeader>
                <TodoInput btnText="添加" addTodo={this.addTodo} />
                <TodoList todos={this.state.todos} onCompletedChange={this.onCompletedChange} />
                <Like />
            </Fragment>
        )
    }
}
